<template>
	<div class="shopcart">
		<div class="content" @click="tooggleList">
			<div class="content-left">
				<div class="logo-wrapper">
					<div class="logo" :class="{'highlight':totalCount>0}">
						<i class="iocn-shopping-cart" :class="{'highlight':totalCount>0}">车</i>
					</div>
					<div class="num" v-show="totalCount>0">{{ totalCount }}</div>
				</div>
				<div class="price" :class="{'highlight':totalPrice>0}">￥{{totalPrice}}</div>
				<div class="desc">另需配送费￥{{deliveryPrice}}元</div>
			</div>
			<div class="content-right">
				<div class="pay" :class="payClass">
					{{ payDesc }}
				</div>
			</div>
		</div>
		<div class="ball-container">
			<div transition="drop" v-for="ball in balls" v-show="ball.show" class="ball">
				<div class="inner"></div>
			</div>
		</div>
        
        <transition name="fold">
			<div class="shopcart-list" v-show="listShow">
				<div class="list-header">
					<h1 class="title">购物车</h1>
					<span class="empty">清空</span>
				</div>
				<div class="list-content">
					<ul>
						<li class="food border-1px" v-for="food in selectFoods">
							<span class="name">{{food.name}}</span>
							<div class="price">
								<span>￥{{food.price*food.count}}</span>
							</div>
							<div class="cartcontrol-wrapper">
								<cart-control :food="food"></cart-control>
							</div>
						</li>
					</ul>
				</div>
			</div>
        </transition>

	</div>
</template>

<script type="text/javascript">

import cartControl from '../cartcontrol/cartcontrol'  // 商品加减按钮组件

export default{
	props: ['deliveryPrice', 'minPrice', 'selectFoods'],
	components: {
		cartControl
	},
	data(){
		return{
			balls: [
				{
					show: false
				},
				{
					show: false
				},
				{
					show: false
				},
				{
					show: false
				},
				{
					show: false
				}				
			],
			fold: true
		}
	},
	computed: {          // 计算属性
		totalPrice(){    // 计算总价
			if(typeof this.selectFoods === 'undefined'){ return 0 }

			let total = 0
			this.selectFoods.map((food) => {
				// console.log(food)
				total += food.price * food.count
			})
			return total
		},
		totalCount(){   // 商品总共件数
			if(typeof this.selectFoods === 'undefined'){ return 0 }

			let count = 0
			this.selectFoods.map((food) => {
				count += food.count
			})
			return count
		},
		payDesc(){      // 结算按钮状态计算
			if(this.totalPrice === 0){
				return `￥${this.minPrice}元起送`
			}else if(this.totalPrice < this.minPrice){
				let diff = this.minPrice - this.totalPrice
				return `还差￥${diff}元起送`
			}else{
				return '去结算' 
			}
		},
		payClass(){      // 结算按钮样式
			if(this.totalPrice < this.minPrice){
				return "not-enough"
			}else{
				return "enough"
			}
		},
		listShow(){
			if(!this.totalCount){
				this.fold = true
				return false
			}
			let show = !this.fold
			return show
		}
	},
	methods: {
		tooggleList(){   // 打开关闭购物车详情
			if(!this.totalCount){
				return 
			}
			this.fold = !this.fold
		}
	}
}

</script>

<style lang="stylus" rel="stylesheet/stylus">

border-1px($color)
  position: relative
  &:after
    content: ''
    position: absolute
    bottom: 0
    left: 0
    display: block
    width: 100%
    border-top: 1px solid $color
bg-image($url)
  background-image: url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3)
    background-image: url($url + "@3x.png")
.clearfix
    display: inline-block
    &:after
        display: block
        content: '.'
        height: 0
        line-height: 0
        clear: both
        visibility: hidden
border-none()
	&:after
		display none

.shopcart
	position fixed
	left 0px
	bottom 0px
	z-index 50
	width 100%
	height 48px
	.content
		display flex
		background #141d27
		.content-left
			flex 1
			.logo-wrapper
				display inline-block
				position relative
				top -10px
				margin 0 12px
				padding 6px 
				width 56px
				height 56px
				box-sizing border-box
				vertical-align top
				border-radius 50%
				background #141d27
				.logo
					width 100%
					height 100%
					border-radius 50%
					background #2b343c
					text-align center
					&.highlight
						background rgb(0,160,220)
					.iocn-shopping-cart
						line-height 46px
						font-style 26px
						color #80858a
						&.highlight
							color #fff
						
				.num
					position absolute
					top 0
					right 0
					width 24px
					height 16px
					line-height 16px
					text-align center
					border-radius 16px
					font-size 9px
					font-weight 700
					color #ccc
					background rgb(240,20,20)
					box-shadow 0 4px 8px 0 rgba(0,0,0,.4)
			.price
				display inline-block
				vertical-align top
				line-height 24px
				margin-top 12px
				padding-right 12px
				box-sizing border-box
				border-right 1px solid rgba(255,255,255,.1)
				font-size 16px
				font-weight 700
				color rgba(255, 255, 255, .5)
				&.highlight
					color #fff
			.desc
				display inline-block
				vertical-align top
				line-height 24px
				margin 12px 0 0 12px
				color rgba(255, 255, 255, .5)
				font-size 10px
				
		.content-right
			flex 0 0 105px
			width 105px
			.pay
				height 48px
				line-height 48px
				text-align center
				font-size 12px
				color rgba(255, 255, 255, .5)
				font-weight 700
				background #2b333b
				&.not-enough
					background #2b333b
				&.enough
					background #00b43c
					color #fff
	.ball-container
		.ball
			position fixed
			left 32px
			bottom 22px
			z-index 200
			&.drop-transition
				transition all 0.4s
				.inner
					width 16px
					height 16px
					border-radius 50%
					background rgb(0,160,220)
					transition all 0.4s
	.shopcart-list
		position absolute
		left 0px
		top 0px
		z-index -1
		width 100%
		&.fold-transition
			transition all 0.5s
			transform translate3d(0,-100%,0)
		&.fold-enter,&.fold-leave
			transform translate3d(0,0,0)
		.list-header
			height 40px
			line-height 40px
			padding 0 18px
			background #f3f5f7
			border-bottom 1px solid rgba(7,17,27,.1)
			.title
				float left
				font-size 14px
				color rgb(7,17,27)
			.empty
				float right
				font-size 12px
				color rgb(0,160,220)	
		.list-content
			padding 0 18px
			max-height 217px
			background #fff
			overflow hidden
			.food
				position relative
				padding 12px 0
				box-sizing border-box
				border-1px(rgba(7,17,27,.1))			
				.name
					line-height 24px
					font-size 14px
					color rgb(7,17,27)
				.price
					position absolute
					right 90px
					bottom 12px
					line-height 24px
					font-size 14px
					font-weight 700
					color rgb(240,20,20)
				.cartcontrol-wrapper
					position absolute
					right 0
					bottom 6px
					
					
					
					




</style>
